<template>
  <div class="box">
      <div class="head">
          <wode text3="编辑资料"></wode>
          <div class="two">
              <img src="../../public/images/3.jpg" alt="">
          </div>
      </div>
      <div class="inp">
          <span>昵称</span>
          <div class="right">
            <input type="text" placeholder="火星网友">
            <a href="#" class="iconfont icon-you"></a>
          </div>
      </div>
       <div class="inp">
          <span>密码</span>
          <div class="right">
            <input type="password" value="123456">
            <a href="#" class="iconfont icon-you"></a>
          </div>
      </div>
       <div class="inp">
          <span>性别</span>
          <div class="right">
            <input type="text" value="男">
            <a href="#" class="iconfont icon-you"></a>
          </div>
      </div>
  </div>
</template>

<script>
import wode from '../components/wode.vue'
export default {
    components:{
        wode
    }
}
</script>

<style lang="less" scoped>
.box {
    width: 100vw;
    .two {
        height: 100/6.4vh;
        img {
            display: block;
            margin: auto;
            width: 80/3.6vw;
            height: 80/3.6vw;
            border-radius: 50%;
        }
    }
    .inp {
        width: 320/3.6vw;
        height: 46/6.4vh;
        line-height: 40/6.4vh;
        margin:10/3.6vw auto;
        font-size: 14/3.6vw;
        border-bottom: 1px solid #000;
        display: flex;
        justify-content: space-between;
        
        input {
            width:68/3.6vw ;
            border: none;
            outline: none;
            text-align: right;
          
        }
        .icon-you {
            font-size: 14/3.6vw;
        }
    }
}
</style>